@import './../../../assets/css/CommonStyle.scss';

$theme-color: #00a1e6;
.popQrEfollew {
  position: fixed;
  .qrContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    width: 140px;
    height: 164px;
    .imgQr {
      height: 140px;
      width: 140px;
    }
  }
  .ant-popover {
    text-align: center;
  }
  .disp {
    margin-top: p-w(8);
    color: rgba($color: #333, $alpha: 0.5);
  }
  .ant-popover-placement-left {
    position: fixed;
  }
  .ant-popover-inner-content {
    padding: 10px;
  }

  .effowContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: p-w(16) 0px;
    width: p-w(180);
  }
  .joinAction {
    background-color: #429cff;
    color: white;
    padding: p-w(6) p-w(12);
    margin-top: p-w(16);
    border-radius: 2px;
  }
}

.disabledColor {
  color: rgba(black, 0.25) !important;
}
.ant-form-item {
  margin-bottom: 0px;
}
.rowBtnLine {
  border-right: 1px solid #d6d6d6;
  padding: 0px 8px;
  &:last-child {
    border-right: none;
  }
}

@include media('>tablet') {
  .DiseaseOverviewContainer {
    .mobielQrIcon {
      display: none;
    }
    .layoutContent {
      padding-bottom: 130px;
    }
    .mobileAddCase {
      display: none;
    }
    position: relative;
    .nowrap-elips {
      @include nowrap-elips;
      max-width: 100px;
    }
    .sear {
      width: 400px;
      /* margin: 20px auto; */
      margin: {
        left: auto;
        right: auto;
      }
    }

    .filterContainer {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
    .ant-form-item {
      display: flex;
      justify-content: space-between;
      margin-right: 20px;
      margin-bottom: 0px;
    }

    .customInput {
      display: flex;
      align-items: center;
      margin-right: p-w(40);
      margin-top: p-w(16);
    }
    .searchBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #429cff;
      border-radius: 4px;
      width: 60px;
      text-align: center;
      color: white;
      height: p-w(40);
      max-height: 40px;
    }
    .visitNumber {
      .ant-input {
        width: 100px;
      }
    }

    .tableOpt {
      padding: 0px;
      text-align: center;
    }
    .addCaseContainer {
      display: flex;
      align-items: center;
    }
    #LayoutComponent {
      min-height: calc(100vh);
    }
    .heig {
      display: block;
      height: 60px;
    }
    .listTable {
      width: 100%;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
      background-color: white;
    }

    .pa {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 40px;
    }
    .pclistAction {
      width: 200px;
    }
    .ant-table-tbody .rowBtnLine:last-child {
      padding-right: 0;
    }

    .ant-table-body {
      @include normal-table;
    }
    .paginationContainer {
      display: flex;
      justify-content: center;
      margin-top: p-w(40);
      margin-bottom: p-w(40);
    }

    .ant-pagination-item {
      border-radius: 100%;
    }
    .ant-pagination-prev,
    .ant-pagination-item-link {
      border-radius: 100%;
    }

    .ant-pagination-item-active {
      background: $btn-color;
      border: none;

      a {
        color: $bg-header;
      }
    }

    /*
          常用普通按钮样式
     */
    .theme-normal-btn {
      padding-left: 24px;
      padding-right: 24px;
      color: $theme-color;
      background: white;
      border: 1px solid $theme-color;
      &:hover,
      &:active,
      &:focus {
        color: #fff;
        background: $theme-color;
      }
    }
    .ant-input-affix-wrapper {
      width: p-w(260);
      height: p-w(40);
      max-height: 40px;
    }
    .ant-input-number-input {
      width: p-w(260);
      height: p-w(40);
      max-height: 40px;
    }
    .ant-input-number {
      width: p-w(260);
      height: p-w(40);
      max-height: 40px;
    }

    .loadStatisticBtn {
      border: 1px solid #429cff;
      color: #429cff;
      padding: p-w(6) p-w(12);
      background-color: white;
      margin-left: p-w(32);
    }
    .addOneCase {
      border: 1px solid #429cff;
      color: #429cff;
      padding: p-w(6) p-w(12);
      background-color: white;
    }
    .listContainer {
      display: flex;
      flex-wrap: wrap;

      // justify-content: space-around;
    }

    .listType {
      display: flex;
      flex: 1;
      justify-content: flex-start;
      align-items: center;

      color: #333;
      margin-top: p-w(20);
      margin-bottom: p-w(20);
      .typeBtn {
        margin-right: p-w(20);
        cursor: pointer;
        display: flex;
        align-items: center;
      }
      .typeBtnSel {
        margin-right: p-w(20);
        color: #429cff;
        cursor: pointer;
        display: flex;
        align-items: center;
      }
      .img {
        height: p-w(16);
        width: p-w(16);
        margin-right: p-w(10);
        margin-left: p-w(20);
      }
    }
    .icon_tips {
      height: p-w(20);
      width: p-w(20);
      margin-left: p-w(9);
    }
    .eFellow {
      position: fixed;
      right: p-w(143);
      z-index: 900;
      bottom: 200px;
      display: flex;
      flex-direction: column;

      .efellowIcon {
        height: p-w(56);
        width: p-w(56);
        margin-bottom: p-w(16);
        background-image: url('./../../../assets/img/pc_icon_e_follow_normal.svg');
        background-size: p-w(56);
        background-color: white;
        &:hover,
        :active {
          background-image: url('./../../../assets/img/pc_icon_e_follow_hover.svg');
        }
      }
      .efellowIconActive {
        background-image: url('./../../../assets/img/pc_icon_e_follow_hover.svg');
      }
      .qrImgIcon {
        height: p-w(56);
        width: p-w(56);
        margin-bottom: p-w(16);
        background-image: url('./../../../assets/img/pc_icon_qr_code_normal.svg');
        background-size: p-w(56);
        background-color: white;
        &:hover,
        :active {
          background-image: url('./../../../assets/img/pc_icon_qr_code_hover.svg');
        }
      }
      .qrImgIconActive {
        background-image: url('./../../../assets/img/pc_icon_qr_code_hover.svg');
      }
    }
  }
}

@include media('>phone', '<=tablet') {
  .DiseaseOverviewContainer {
    .layoutContent {
      padding-bottom: 130px;
    }
    .listTable {
      width: 100%;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
      background-color: white;
    }
    .mobielQrIcon {
      display: none;
    }
    .mobileAddCase {
      display: none;
    }
    .paginationContainer {
      display: flex;
      justify-content: center;
      margin-top: pad-w(40);
      margin-bottom: pad-w(20);
    }

    .icon_tips {
      height: pad-w(20);
      width: pad-w(20);
      margin-left: pad-w(9);
    }
    .listContainer {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-around;
    }
    .ant-table-body {
      @include normal-table;
    }
    .filterContainer {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
    .addCaseContainer {
      display: flex;
      align-items: center;
    }
    .listType {
      display: flex;
      flex: 1;
      justify-content: flex-start;
      font-size: pad-w(14);
      color: #333;
      margin-top: pad-w(20);
      margin-bottom: pad-w(18);
      align-items: center;
      .typeBtn {
        display: flex;
        align-items: center;
        margin-right: pad-w(30);
      }
      .typeBtnSel {
        display: flex;
        align-items: center;
        margin-right: pad-w(30);
        color: #429cff;
      }
      .img {
        height: p-w(32);
        width: p-w(32);
        margin-right: p-w(16);
        margin-left: p-w(20);
      }
    }
    .ant-input-affix-wrapper {
      width: pad-w(220);
      height: pad-w(40);
      max-height: 40px;
    }
    .ant-input-number {
      width: pad-w(220);
      height: pad-w(40);
      max-height: 40px;
    }
    .ant-input {
      width: pad-w(220);
      height: pad-w(40);
      max-height: 40px;
    }
    .customInput {
      display: flex;
      align-items: center;
      margin-right: pad-w(40);
      margin-top: pad-w(16);
    }
    .searchBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #429cff;
      border-radius: 4px;
      width: pad-w(80);
      text-align: center;
      color: white;
      height: pad-w(40);
      max-height: 40px;
    }
    .loadStatisticBtn {
      border: 1px solid #429cff;
      color: #429cff;
      padding: pad-w(6) pad-w(12);
      margin-left: pad-w(32);
      background-color: white;
    }
    .addOneCase {
      border: 1px solid #429cff;
      color: #429cff;
      padding: pad-w(6) pad-w(12);
      background-color: white;
    }
    .eFellow {
      position: fixed;
      right: pad-w(30);
      z-index: 900;
      top: 80vh;
      display: flex;
      flex-direction: column;

      .efellowIcon {
        height: pad-w(46);
        width: pad-w(46);
        margin-bottom: pad-w(16);
        background-image: url('./../../../assets/img/pc_icon_e_follow_normal.svg');
        background-size: pad-w(46);
        background-color: white;
        &:hover,
        :active {
          background-image: url('./../../../assets/img/pc_icon_e_follow_hover.svg');
        }
      }
      .qrImgIcon {
        height: pad-w(46);
        width: pad-w(46);
        margin-bottom: pad-w(16);
        background-image: url('./../../../assets/img/pc_icon_qr_code_normal.svg');
        background-size: pad-w(46);
        background-color: white;
        &:hover,
        :active {
          background-image: url('./../../../assets/img/pc_icon_qr_code_hover.svg');
        }
      }
    }
    .pclistAction {
      width: 200px;
    }
    .ant-pagination-item {
      border-radius: 100%;
    }
    .ant-pagination-prev,
    .ant-pagination-item-link {
      border-radius: 100%;
    }

    .ant-pagination-item-active {
      background: $btn-color;
      border: none;

      a {
        color: $bg-header;
      }
    }
  }
}

@include media('<=phone') {
  .DiseaseOverviewContainer {
    .paginationContainer {
      display: none;
    }
    .layoutContent {
      background-color: #f0f2f5;
    }
    .preViewHeader {
      background-color: #f0f2f5;
      padding: m-w(32) m-w(30) 0px m-w(30);
    }
    .chartCardsContainer {
      padding: 0px;
      margin: 0px;
    }
    .listContainer {
      padding: 0px;
      background-color: #f0f2f5;
      margin-top: m-w(32);
    }

    .eFellow {
      display: none;
    }
    .mobileAddCase {
      position: fixed;
      z-index: 900;
      top: m-w(160);
      right: 0px;
      display: flex;
      background-color: white;
      color: #429cff;
      font-size: m-w(30);
      height: m-w(72);
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;
      padding: 0px m-w(20);
      align-items: center;
      box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1);
    }
    .mobielQrIcon {
      position: fixed;
      z-index: 900;
      bottom: 60px;
      right: 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: m-w(120);
      width: m-w(120);
      padding: m-w(20);
      border-radius: m-w(60);
      align-items: center;
      box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1);
      background-color: white;
      .img {
        height: m-w(32);
        width: m-w(32);
      }
    }
    .customInput {
      // width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: m-w(0);
      width: 100%;
      margin-top: m-w(24);
    }
    .ant-input-affix-wrapper {
      width: 100%;
    }
    .filterContainer {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      // padding: 0px 10px 10px 10px;
    }

    .header_name {
      display: initial;
    }

    .ant-input-group {
      display: inline-flex;
      margin-left: 10px;
      margin-bottom: m-h(40);
      position: fixed;
      /* background-color: $bg-color; */

      border-left: none !important;

      .ant-input.ant-input-lg {
        order: 1;
      }
    }
    .searchBtn {
      display: none;
    }

    .fiterBtnContainer {
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
      flex: 1;
    }
    .mobileSearchBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #429cff;
      border-radius: 4px;
      // width: m-w(120) !important;
      text-align: center;
      color: white;
      height: 30px;
      // margin-left: m-w(32);
      padding: m-w(14) m-w(34);
    }
    .ant-input:focus {
      border-color: $table-sm-color;
      border-right-width: 1px !important;
      outline: 0;
      box-shadow: none;
    }

    .ant-input-group-addon:last-child {
      width: 40px;
      border-right: none;
      border-radius: 4px 0 0 4px;
    }

    /* -------------------------- */
    .header {
      width: 100% !important;

      padding: {
        left: m-w(30);
        right: m-w(30);
      }

      .header_name {
        position: relative;
        top: 0;
        margin-left: m-w(39);
        left: -35%;
        float: left;
        display: block;
      }

      .userName-dropdown {
        position: relative;
        top: 0;
        left: 0;
        float: right;
        display: block;
      }
    }

    .sear {
      background-color: white;
      height: m-h(100);
      display: flex;
      justify-content: center;
      width: 100%;
      position: fixed;
      top: 65px;
      z-index: 99999;
      margin: 0;
    }

    .poHeight {
      height: 100px;
    }

    .center {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .content {
      background-color: $bg-color;
    }

    .mo-dataList {
      background-color: $bg-header;
      margin-top: m-h(16);

      padding: {
        left: 10px;
        right: 10px;
      }
    }

    .upRow {
      font-size: m-w(22);
      padding-top: m-h(24);
    }
    .mid {
      font-size: m-w(22);
      padding-top: m-h(24);
      color: rgba(51, 51, 51, 1);
    }
    .downRow {
      font-size: m-w(28);
      margin-top: m-h(40);
      padding-bottom: m-h(39);
      border-bottom: 1px dashed rgba(51, 51, 51, 0.2);
    }

    .table-row-action {
      width: 100%;
      padding: m-h(24) 0;
      font-size: m-w(28);
    }

    .PageInfoCompount {
      display: none;
    }

    .heig {
      display: block;
      height: 100px;
    }

    .mobileSpin {
      position: fixed;
    }

    .ant-btn.ant-input-search-button.ant-btn-primary.ant-btn-lg {
      background-color: traxnsparent;
      border-color: $table-sm-color;
      border-right: none;
      border-radius: 4px 0 0 4px;
      background-color: $bg-color;
      /* left: -100%; */
    }
    .ant-input {
      width: m-w(360) !important;
    }

    .ant-input-number {
      width: m-w(360);
    }
    .ant-input.ant-input-lg {
      border: 1px solid $table-sm-color;
    }

    .ant-input.ant-input-lg {
      width: calc(100% - 60px);
      border-left: none;
      border-radius: 0 4px 4px 0;
      background-color: $bg-color;
    }
  }
}
